import React from "react";
import { url, toplist } from "../../api";
import { axiosGet } from "../../axios";
import {inject,observer} from 'mobx-react'
import {withRouter} from 'react-router'

@inject('songlist')@observer
 class GlobalList extends React.Component {
     constructor(props){
         super(props)
         this.state={
             list:[]
         }
     }
     componentDidMount(){
         this.getToplist()
     }
     getToplist(){
        for (let i = 4; i < 20; i++) {
            axiosGet(url, toplist, "idx=" + i).then((data) => {
              let list = this.state.list;
              list.push(data.playlist);
              this.setState({
                list: list,
              });

            });
          }
     }
  render() {
    console.log(this.state.list)
    return (
      <div className='global-list'>
          <h3 className='title'>全球榜</h3>
          <div className="list">
        {this.state.list &&
          this.state.list.map((item, index) => {
            return (
              <div
                className="list-item"
                key={index}
                onClick={() => {
                  this.props.songlist.setSonglistDetail(item)
                  this.props.history.push('/songListDetail')
                  window.scrollTo(0, 0);
                }}
              >
                <p className="list-item-description">
                  {item.description}
                </p>
                <img src={item.coverImgUrl} alt=""></img>
                
                <p className='list-item-name'>{item.name}</p>
              </div>
            );
          })}
      </div>
      </div>
    );
  }
}
export default withRouter(GlobalList)